<template>
  <div>
    <div class="top" v-if="router !== 'login' && router !== 'regist'">
      <div class="ab w yy">
        <!-- logo区域 -->
        <div class="logohezi">
          易联求职
          <!-- <a href="/"><i class="logo"></i></a> -->
        </div>
        <!-- 首页nav -->
        <div class="nav">
          <ul>
            <li v-if="userType == '1'">
              <router-link
                to="/home"
                :class="{ c: this.$route.path === '/home' }"
                >首页</router-link
              >
            </li>
            <li v-if="userType == '1'">
              <router-link
                to="/job"
                :class="{ c: this.$route.path === '/job' }"
                >职位</router-link
              >
            </li>
            <li v-if="userType == '1'">
              <router-link
                to="/school"
                :class="{ c: this.$route.path === '/school' }"
                >校园</router-link
              >
            </li>
            <li v-if="userType == '1'">
              <router-link
                to="/square"
                :class="{ c: this.$route.path === '/square' }"
                >广场</router-link
              >
            </li>
            <li v-if="userType == '2'">
              <router-link
                to="/publish"
                :class="{ c: this.$route.path === '/publish' }"
                >发布职位</router-link
              >
            </li>
            <li v-if="userType == '2'">
              <router-link
                to="/application"
                :class="{ c: this.$route.path === '/application' }"
                >应聘管理</router-link
              >
            </li>
          </ul>
        </div>
        <!-- 上传简历 -->
        <div class="jl">
          <span>
            <el-dropdown @command="choose" v-if="userInfo.username && userInfo.avator">
              <div class="flex-center">
                <a style="color: #fff;cursor: pointer;">{{userInfo.username}}</a>
                <img class="avator" :src="userInfo.avator" alt="">
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="center">个人中心</el-dropdown-item>
                <el-dropdown-item command="login">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <input @click="toLogin" v-if="!userInfo.username" type="button" name="注册" id="zc" value="注册" />
            <input @click="toLogin" v-if="!userInfo.username" type="button" name="登录" id="dl" value="登录" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserInfo
} from '../service'
export default {
  name: "YHeader",
  watch: {
    $route(to, from) {
      if (from.name === 'login') {
        if (localStorage.getItem("meiyaWebInfo")) {
          this.userInfo = JSON.parse(localStorage.getItem("meiyaWebInfo"))
          getUserInfo(this.userInfo._id).then(res => {
            this.userInfo = res.data
            this.userType = this.userInfo.type
          })
        }
      }
      this.router = to.name
    }
  },
  data() {
    return {
      userInfo: {},
      userType: '1',
      router: ''
    }
  },
  created() {
    if (localStorage.getItem("meiyaWebInfo")) {
      this.userInfo = JSON.parse(localStorage.getItem("meiyaWebInfo"))
      getUserInfo(this.userInfo._id).then(res => {
        this.userInfo = res.data
        this.userType = this.userInfo.type
      })
    }
  },
  methods: {
    toCenter() {
      this.$router.push('/center')
    },
    search() {
      alert(this.keywords)
    },
    toLogin() {
      this.$router.push('/login')
    },
    choose(v) {
      if (v === 'login') {
        localStorage.removeItem('meiyaWebInfo')
      }
      this.$router.push(`/${v}`)
    }
  },
};
</script>

<style lang="scss" scoped>
/* 导航首页 */

.nav {
  float: left;
  margin-left: 30px;
  line-height: 51px;
}

.nav ul li a:link {
  color: #ffffff;
}

.nav a:hover {
  color: #00d7c6;
}

.nav ul li {
  float: left;
  margin: 0 14px;
  font-size: 14px;
}
// .nav ul li a .c {
//   color: #00d7c6;
// }
.nav ul li .c {
  color: #00d7c6 !important;
}
.avator {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logohezi {
  font-size: 20px;
  color: #ffffff;
  line-height: 40px;
}
</style>
